var addBtn, updateBtn;

$(document).ready(function() {
	prepareRouteViewEvent();
	prepareRouteDeleteEvent();
	prepareRouteAddEvent();
	prepareRouteUpdateEvent();
	
	prepareForm();
	prepareRouteList();
});

function prepareRouteViewEvent() {
	$(document).on('click', '#listTable a.title', function(e){
		$.getJSON("view.do", {
				no: $(this).attr("href")
			}, function (route) {
				setFormField(route);
			});
		e.preventDefault();
	});
}

function prepareRouteDeleteEvent() {
	$(document).on('click', '#listTable a.deleteBtn', function(e){
		$.getJSON("delete.do", {
				no: $(this).attr("href")
			}, function (data) {
				if (data.status == "success") {
					$('#listTable tr.routeNo_' + data.no).remove();
				}
			});
		
		clearForm();
		
		e.preventDefault();
	});
}

function prepareRouteAddEvent() {
	$('#addBtn').on('click', function() {
		$("#loading")
			.ajaxStart(function(){
				$(this).show();
			})
			.ajaxComplete(function(){
				$(this).hide();
			});
		
		$.ajaxFileUpload
		(
			{
				url:'add.do', 
				secureuri:false,
				files:['photo1', 'photo2', 'photo3'],
				dataType: 'json',
				data: {
					name: $('#name').val(),
					startPointLat: $('#startPointLat').val(),
					startPointLngt: $('#startPointLngt').val(),
					endPointLat: $('#endPointLat').val(),
					endPointLngt: $('#endPointLngt').val()
				},
				success: function (data)
				{
					$('#listTable tr:first').after(
							buildRouteRow(data));
					clearForm();
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
	});
}

function prepareRouteUpdateEvent() {
	$('#updateBtn').on('click', function() {
		$("#loading")
			.ajaxStart(function(){
				$(this).show();
			})
			.ajaxComplete(function(){
				$(this).hide();
			});
		
		$.ajaxFileUpload
		(
			{
				url:'update.do', 
				secureuri:false,
				files:['photo1','photo2','photo3'],
				dataType: 'json',
				data: {
					routeNo: $('#routeNo').val(),
					name: $('#name').val(),
					tel: $('#tel').val(),
					addr: $('#addr').val(),
					photo1Origin: $('#photo1Origin').val(),
					photo2Origin: $('#photo2Origin').val(),
					photo3Origin: $('#photo3Origin').val()
				},
				success: function (data)
				{
					$('#listTable tr.routeNo_' + data.routeNo).remove();
					$('#listTable tr:first').after(
							buildRouteRow(data));
					$('#view_' + data.routeNo).trigger('click');
				},
				error: function (data, status, e)
				{
					alert(e);
				}
			}
		)
	});
}

function setFormField(route) {
	$('input:hidden').val('');
	$('form img').remove();
	
	$('#name').val(route.name);
	$('#tel').val(route.tel);
	$('#addr').val(route.addr);
	$('#routeNo').val(route.routeNo);
	
	$.each(route.photoList, function(index, data){
		$('#photo' + (index+1) + 'Origin').val(data.filePath);
		$('<img/>')
			.attr('src', '../upload/' + data.filePath)
			.attr('width', '60')
			.attr('height', '80')
			.insertBefore('#photo' + (index + 1));
	});
	
	$('#addBtn').after(updateBtn);
	$('#addBtn').detach();
}

function clearForm() {
	$('input:reset').trigger('click');
}

function prepareForm() {
	addBtn = $('#addBtn');
	updateBtn = $('#updateBtn');
	
	$('#updateBtn').detach();
	
	$('input:reset').on('click', function() {
		$('#updateBtn').after(addBtn);
		$('#updateBtn').detach();
		$('form img').remove();
	});
}

function prepareRouteList() {
	$.ajax({
		dataType: "json",
		url: "list.do",
		success: function(data) {
			$.each(data, function (index, route){
				$('#listTable').append(
						buildRouteRow(route));
			});
		}
	});
}

function buildRouteViewLink(route) {
	return $('<a/>')
		.attr("id", "view_" + route.routeNo)
		.attr("href", route.routeNo)
		.text(route.routeNo)
		.addClass("title");
}


function buildRouteDeleteLink(route) {
	return $('<a/>')
		.attr("href", route.routeNo)
		.text("삭제")
		.addClass("deleteBtn");
}


function buildRouteRow(route) {
	return $('<tr/>').append(
			//	$('<td/>').text(route.routeNo),
				$('<td/>').append(
					buildRouteViewLink(route)),
				$('<td/>').text(route.startPointLat),
				$('<td/>').text(route.startPointLngt),
				$('<td/>').text(route.endPointLngt),
				$('<td/>').text(route.endPointLngt),
				$('<td/>').text(route.name).addClass("routeNo_" + route.routeNo),
				$('<td/>').append(buildRouteDeleteLink(route)))
			 .addClass("routeNo_" + route.routeNo);
}








